<template>
    <Back title="预约须知" notice-view-sty="notice">
        <template>
            <div class="con">
                <div class="header">编辑预约信息</div>
                <p class="title">内容<span>*</span></p>
                <div class="text">
                     <div style="border: 1px solid #ccc;">
                        <Toolbar
                            style="background-color: #f2f2f2; height: 30px;"
                            :editor="editor"
                            :defaultConfig="toolbarConfig"
                            :mode="mode"
                        />
                        <Editor
                            style="height: 225px; overflow-y: hidden;"
                            v-model="html"
                            :defaultConfig="editorConfig"
                            :mode="mode"
                            @onCreated="onCreated"
                        />
                        <div class="bottom"></div>
                    </div>
                </div>
                <el-button type="primary">保存</el-button>
            </div>
        </template>
    </Back>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css'
import Back from '@/components/Part/BackColor.vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
export default {
    components:{
        Back,
        Editor,
        Toolbar
    },
    data() {
        return {
            editor: null,
            html: '<p>hello</p>',
            toolbarConfig: { 
                toolbarKeys: [ 
                    'undo', 
                    'redo', 
                    '|', 
                    'headerSelect', 
                    'bold', 
                    'underline', 
                    'italic', 
                    'color', 
                    '|', 
                    'bulletedList', 
                    'numberedList', 
                    {key: 'group-justify', title: '对齐', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M768 793.6v102.4H51.2v-102.4h716.8z m204.8-230.4v102.4H51.2v-102.4h921.6z m-204.8-230.4v102.4H51.2v-102.4h716.8zM972.8 102.4v102.4H51.2V102.4h921.6z"></path></svg>', menuKeys: ["justifyLeft","justifyRight","justifyCenter","justifyJustify"]}, 
                    {key: 'group-indent', title: '缩进', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M0 64h1024v128H0z m384 192h640v128H384z m0 192h640v128H384z m0 192h640v128H384zM0 832h1024v128H0z m0-128V320l256 192z"></path></svg>', menuKeys: ['indent', 'delIndent']}, 
                    '|', 
                    'insertLink', 
                    {key: 'group-image', title: '图片', iconSvg: '<svg viewBox="0 0 1024 1024"><path d="M959.877 128l0.123 0.123v767.775l-0.123 0.122H64.102l-0.122-0.122V128.123l0.122-0.123h895.775zM960 64H64C28.795 64 0 92.795 0 128v768c0 35.205 28.795 64 64 64h896c35.205 0 64-28.795 64-64V128c0-35.205-28.795-64-64-64zM832 288.01c0 53.023-42.988 96.01-96.01 96.01s-96.01-42.987-96.01-96.01S682.967 192 735.99 192 832 234.988 832 288.01zM896 832H128V704l224.01-384 256 320h64l224.01-192z"></path></svg>', menuKeys:['insertImage', 'uploadImage']}, 
                    'emotion', 
                ]
             },
            editorConfig: { placeholder: '请输入内容...' },
            mode: 'default', // or 'simple'
        }
    },
    methods: {
        onCreated(editor) {
            this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        },
    },
    mounted() {
        // 模拟 ajax 请求，异步渲染编辑器
        setTimeout(() => {
            this.html = '<p>模拟 Ajax 异步设置内容 HTML</p>'
        }, 1500)
    },
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
}
</script>
<style lang="scss" >
    [notice-view-sty="notice"]{
        .text{
            width: 80%;
            .w-e-bar{
                background: transparent;
                height: 30px;
                .w-e-bar-item{
                    height: 32px;
                    padding: 0;
                }
            }
            .bottom{
                height: 30px;
                background-color: #f2f2f2;
            }
            
        }
        button.el-button.el-button--primary{
            margin: 40px 0 20px;
        }
        .title{
            font-size: 12px;
            color: #d2d2d2;
            padding: 20px 0;
            span{
                color: red;
            }
        }
        .header{
            height: 40px;
            background-color: #f2f2f2;
            display: flex;
            align-items: center;
            padding-left: 10px;
            box-sizing: border-box;
            font-size: 12px;
            color:blue;
        }
    }
</style>